<template>
  <div class="roleList">
    <div style="margin-bottom: 10px;">
      <el-text style="font-size: larger; font-weight: bolder;">
        {{ util.language('角色、菜单、权限管理', 'Role & Menu & Authority Management') }}
      </el-text>
    </div>
    <el-form :inline="true">
      <el-form-item>
        <el-button-group>
          <el-button @click="commitFindList()" :loading="loading.find">{{ util.language('刷新', 'Refresh') }}</el-button>
          <el-button type="primary" @click="add()">{{ util.language('新增', 'New') }}</el-button>
          <el-button type="warning" :disabled="pageState.selected.length != 1" @click="update()">{{ util.language('详情', 'Detail') }}</el-button>
          <el-button type="danger" :disabled="pageState.selected.length != 1" @click="del()">{{ util.language('删除', 'Delete') }}</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-table :data="data.roleList" @selection-change="selectionChange()" ref="tabRef" border style="height: calc(100vh - 220px);" v-loading="loading.find">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" width="70" align="center">
        <template #default="scope">
          <el-link type="primary" @click="update(scope.row)">{{ scope.row.id }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="util.language('角色', 'Role')" />
    </el-table>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '../../apis/api'
import cache from '../../utils/cache'
import util from '../../utils/util'

const router = useRouter()
const tabRef = ref()

const data = reactive({
  roleList: [],
  menuList: [],
})
const loading = reactive({
  find: false
})

const pageState = reactive({
  selected: []
})

const commitFindList = () => {
  loading.find = true
  api.get('/backend/role/getAllRole').then(res => {
    data.roleList = res.roleList
  }).finally(() => {
    loading.find = false
  })
}
commitFindList()

const selectionChange = () => {
  pageState.selected = tabRef.value.getSelectionRows()
}

const add = () => {
  cache.setObject(cache.keys.pageParam + 'roleDetail', null)
  router.push('/roleDetail')
}

const update = (role) => {
  if (!role) {
    role = tabRef.value.getSelectionRows()[0]
  }
  cache.setObject(cache.keys.pageParam + 'roleDetail', role)
  router.push('/roleDetail')
}

const del = () => {
  const role = tabRef.value.getSelectionRows()[0]
  ElMessageBox.confirm('', {
    title: util.language('确认删除', 'Confirm Delete'),
    message: util.language('将要删除 ' + role.name, 'Will delete ' + role.name),
    autofocus: false,
    confirmButtonText: util.language('删除', 'OK'),
    cancelButtonText: util.language('取消', 'Cancel'),
  }).then(() => {
    api.post('/backend/role/delById', { id: role.id }).then(() => {
      ElMessage.success(util.language('删除成功', 'Success'))
      commitFindList()
    })
  })
}

</script>

<style lang="less"></style>